<template>
    <div>
        <Button class="goBack" type="primary" @click="$router.back()"><Icon type="ios-arrow-back" /> 返回  </Button>
        <Card class="line-style">
            <div class="line-wrap"  >
                <div class="line-title">
                    <p>姓名:{{personalInfo.name}}</p>
                    <div>
                        <p>年龄:{{personalInfo.age}}岁</p>
                        <p>性别:{{personalInfo.gender === 'male' ? '男' : personalInfo.gender === 'female' ? '女' : ''}}</p>
                        <p>职业:{{personalInfo.job}}</p>
                    </div>
                </div>
                <div class="medical-records-main">
                    <Form v-for="(item,index) in formCustom" :key="index" :ref="'formRecord'+index"  :model="item"
                          :label-width="100" class="record-form" :rules="rulesRecord">
                        <div class="index">  就诊纪录{{index+1}} </div>
                        <div class="itemForm">
                            <FormItem  label="就诊时间"  prop="healing_date">
                                <DatePicker type="date" format="yyyy-MM-dd"    v-model="item.healing_date"   placeholder="选择就诊时间" ></DatePicker>
                            </FormItem>
                            <FormItem  label="就诊详情" prop="remarks" >
                                <Input type="textarea"  maxlength="255" v-model="item.remarks" placeholder="填写就诊纪录" />
                            </FormItem>
                        </div>
                        <div class="save">  <Button  type="primary" @click="saveRecord(index,'formRecord'+index)">保存</Button>  </div>
                    </Form>
                    <Button class="add" type="dashed" long @click="handleAdd" icon="md-add">添加</Button>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
import { insert, findList } from '@/api/outbreak-management/outbreak-surveillance/medical-records'

// 就诊纪录
export default {
  name: 'addPage',
  data () {
    return {
      // 当前人员信息
      formCustom: [],
      rulesRecord: {
        healing_date: [
          { required: true, type: 'date', message: '就诊时间必填', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '就诊记录必填', trigger: 'blur' }
        ]
      },
      personalInfo: { }// 个人信息
    }
  },
  methods: {
    // 保存就诊信息
    saveRecord (index, name) {
      this.$refs[name][0].validate((valid) => {
        if (valid) {
          let formData = {
            sick_id: this.personalInfo.id,
            healing_date: this.$common.moment(this.formCustom[index].healing_date).format('YYYY-MM-DD'),
            remarks: this.formCustom[index].remarks
          }
          insert(formData).then((res) => {
            let { errcode } = res.data
            if (errcode === 0) {
              this.$Message.success('添加就诊信息成功')
            } else {
              this.$Message.error('添加就诊信息失败')
            }
          })
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    // 添加
    handleAdd () {
      this.index++
      this.formCustom.push({
        index: this.index,
        status: 1,
        healing_date: '',
        remarks: '',
        imp_date: ''
      })
    },
    // 获取确诊人员个人信息
    getInfo () {
      this.personalInfo = this.$route.query
      let sick_id = this.personalInfo.id
      findList({ sick_id }).then(res => {
        let { errcode, data } = res.data
        if (errcode === 0) {
          console.log(data)
          if (data.length === 0) {
            this.formCustom.push({
              healing_date: '',
              remarks: '',
              index: 1,
              status: 1
            })
          } else {
            data.forEach((item) => {
              this.index++
              this.formCustom.push({
                index: this.index,
                status: 1,
                healing_date: this.$common.moment(item.healing_date).format('YYYY-MM-DD'),
                remarks: item.remarks
              })
            })
          }
        } else {
          this.$Message.error('获取就诊记录失败!')
        }
      })
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>

<!--<style scoped lang="less">-->
<!--    /*line-style .line-wrap{*/-->
<!--    /*    flex-direction: column;*/-->
<!--    /*}*/-->
<!--    .line-style {-->
<!--        .line-wrap{-->
<!--            flex-direction: column;-->
<!--            .line-title{-->
<!--                width: 100% !important;-->
<!--                height: 40px;-->
<!--                border-right: none !important;-->
<!--                border-bottom:1px solid  #dcdee2;-->
<!--                margin-bottom: 10px;-->
<!--                display: flex;-->
<!--                >p{-->
<!--                    font-size: 20px;-->
<!--                    margin-right: 20px;-->
<!--                }-->
<!--                div{-->
<!--                    display: flex;-->
<!--                    align-items: end;-->
<!--                    justify-content: flex-end;-->
<!--                    height: 20px;-->
<!--                    p+p{-->
<!--                        margin-left: 10px;-->
<!--                    }-->
<!--                }-->
<!--            }-->
<!--            .record-form{-->
<!--                display: flex;-->
<!--                /*align-items: center;*/-->
<!--                .index{-->
<!--                    display: flex;-->
<!--                    align-items: center;-->
<!--                    width: 100px;-->
<!--                    border-right: 1px solid #cccccc;-->
<!--                }-->
<!--                .itemForm{-->
<!--                    flex: 1;-->
<!--                }-->
<!--                .save{-->
<!--                    width:100px;-->
<!--                    display: flex;-->
<!--                    align-items: flex-end;-->
<!--                    justify-content: center;-->
<!--                    padding-bottom: 10px;-->
<!--                }-->
<!--            }-->
<!--            .record-form+.record-form{-->
<!--                margin-top: 10px;-->
<!--            }-->
<!--            .add{-->
<!--                margin-top: 10px;-->
<!--            }-->
<!--        }-->
<!--    }-->

<!--</style>-->
